<style lang = "scss" scoped>
   #cmain{
      .cmain-content{
          height:auto;
            min-height:525px;
            border-radius:10px;
            background:#fff;
            box-shadow:0px 0px 15px 0px rgba(207,207,207,1);
            padding:0px 25px;
            padding-bottom:40px;
            .cmain-header{
                height: 78px;
                padding:20px 0px;
            }
            .cmain-table{
                min-height:440px;
                .el-table{
                    min-height:450px;
                }
            }
      } 
   }
</style>
<template>
    <div id="cmain">
        <div class="cmain-content">
            <div class="cmain-header">
                <el-row>
                    <el-col :span="3">
                        <el-button type="primary" @click="addPatient" size="small">预约建档</el-button>
                    </el-col>
                    <el-col :span="21" style="text-align:right;">
                        <el-input style="width:20%" placeholder="请输入姓名或性别查询" size="small" v-model="keyword" @keyup.enter.native="queryList"  class="input-with-select">
                            <el-button type="primary" size="small" @click="queryList" slot="append">搜索</el-button>
                        </el-input>
                    </el-col>
                </el-row>
            </div>
            <!--表格-->
            <div class="cmain-table">
                <el-table v-if="!isWarnShow" border :data="tableData" v-loading="loadding"  element-loading-text="数据加载中，请稍后">
                    <el-table-column label="序号" type="index" width="100">
                        <template slot-scope="scope">
                            <span v-text="getIndex(scope.$index)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column label="姓名">
                        <template slot-scope="scope">
                            <span v-if="scope.row.familyTree && scope.row.familyTree.name">{{scope.row.familyTree.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="性别"  width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.familyTree && scope.row.familyTree.sex">{{scope.row.familyTree.sex}}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="修改时间" prop="updateDate"  width="300"></el-table-column> -->
                    <el-table-column label="创建时间" prop="createDate"  width="300"></el-table-column>
                    <el-table-column label="来源" >
                        <template slot-scope="scope">
                            <span>{{scope.row.productId | getFrom}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="350">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="toDraw(scope.row)" type="primary">编辑</el-button>
                            <el-button size="mini" @click="viewRiskPage(scope.row)" type="primary">预览</el-button>
                            <el-button @click="showDeleteDialog(scope.row)" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                    <div slot="empty"></div>
                </el-table>
                <div v-if='emptyShow' class='empty'>
                    <img style="display:block;float:left;" src="/static/icon/add.png" />
                    <span style="display:block;float:left;margin-top:3px;margin-left:10px;">暂无数据，请创建</span>
                </div>
                <warn v-if="isWarnShow" @callback="getFamilyList"></warn>
            </div>
              <div v-if="!isWarnShow" class="pageation">
                <el-pagination style="float:left;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import warn from '@/components/warn.vue';
import {
    familyTree
} from 'api/index.js';
import { setCookie, getCookie, delCookie } from '@/common/js/cookie.js';
export default {
    name:"allPatient",
    data(){
        return {
            isWarnShow:false,
            loadding:false,
            emptyShow:false,
            pageIndex:1, //当前页
            pageSize:10,
            total:0,
            keyword:"",  //查询条件
            relKeyword:"",
            tableData:[]
        }
    },
    methods:{
        getIndex(index){
            return (this.pageIndex-1)*this.pageSize+(Number(index)+1);
        },
        queryList(){
            this.relKeyword = this.keyword;
            this.getFamilyList();
        },
        toDraw(row){
            var obj={
                familyTreeId:row.id
            }
            this.loadding = true;
            familyTree.familyDiagramFlag(obj).then((res) => {
                if(res.returnCode == 801){
                    // sessionStorage.setItem("drawState",'edit');
                    // sessionStorage.setItem("familyTreeId",row.id);
                    // this.$router.push("/drawMain");
                    this.$store.state.drawState = "edit";
                    this.$store.state.familyTreeId = row.id
                    var a = document.createElement("a");
                    a.setAttribute("target", "_blank");
                    a.setAttribute("href", "/drawMain?familyTreeId="+row.id+"&drawState=edit");
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                }else if(res.returnCode == 800){
                    this.$store.state.drawState = "add";
                    this.$store.state.familyTreeId = row.id
                    this.$store.state.familyName = row.familyTree.name;
                    this.$store.state.familySex = row.familyTree.sex;
                    this.$store.state.curentAge =  row.familyTree.birthDate ? this.getCurrentAge(row.familyTree.birthDate) : '';
                    this.$store.state.telNum = row.familyTree.tel ?  row.familyTree.tel : "";
                    // sessionStorage.setItem("familyName",row.familyTree.name);
                    // sessionStorage.setItem("familySex",row.familyTree.sex);
                    
                    this.$router.push("/drawIndex");
                }else{
                    this.$Message.error(res.msg); 
                }
                this.loadding = false;
            }).catch((error) => {
                this.loadding = false;
            });
        },
        viewRiskPage(row){
            var a = document.createElement("a");
            a.setAttribute("target", "_blank");
            a.setAttribute("href", "/riskAssess?familyTreeId="+row.id+"&drawState=edit");
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        },
        addPatient(){
            this.$router.push("/addPatient");
        },
        //获取列表数据
        getFamilyList(){
            var obj={
                userId: getCookie("userid"),
                query: this.relKeyword,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            };
            this.loadding = true;
            familyTree.getHome(obj).then((res) => {
                if(res.returnCode == 0 || res.returnCode == 200){
                    if(res.data.documentList && res.data.documentList.length>0){
                        this.tableData = res.data.documentList;
                        this.total = res.data.count;
                    }else{
                        this.tableData = [];
                        this.total = res.data.count;
                    }
                    console.log(this.tableData);
                }else {
                    this.$Message.error(res.msg);   
                }
                this.isWarnShow = false;
                if (this.tableData == null || this.tableData.length == 0) {
                    this.emptyShow = true;
                }else{
                    this.emptyShow = false;
                }
                this.loadding = false;
            }).catch((error) => {
                this.isWarnShow = true;
                this.loadding = false;
            })
        },
        handleSizeChange(size) {
            this.pageSize = size;
            this.getFamilyList();
        },
        handleCurrentChange(page) {
            this.pageIndex = page;
            this.getFamilyList();
        },
        searchById(){
            var obj={
                userId: getCookie("userid"),
                // userId: "11",
                id:this.keyword,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            };
            this.emptyShow = false;
            this.loadding = true;
            familyTree.findOneById(obj).then((res) => {
                console.log(res.data)
                if(res.returnCode == 0 || res.returnCode == 200){
                    if(res.data && res.data.familyTree){
                        this.tableData = [];
                        this.tableData.push(res.data);
                         this.total = 1
                    }
                }else {
                    this.$Message.error(res.msg);
                }
                this.isWarnShow = false;
                this.loadding = false;
                if (this.tableData == null || this.tableData.length == 0) {
                    this.emptyShow = true;
                }else{
                    this.emptyShow = false;
                }
                
            }).catch((error) => {
                this.isWarnShow = true;
                this.loadding = false;
            })
        },
        showDeleteDialog(row){
            var _this = this;
            this.$confirm('该条数据将被删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRow(row);
            })
        },
        deleteRow(row){
            console.log(row);
            var obj={
                id:row.id
            };
            familyTree.deleteOneById(obj).then((res) => {
                if(res.returnCode == 0 || res.returnCode == 200){
                    this.getFamilyList();
                    this.$Message.success("删除成功");
                }else{
                     this.$Message.error(res.msg);
                }
            }).catch((error) => {
                this.isWarnShow = true;
            })
        },
        //获取当前周岁年龄
        getCurrentAge(strBirthday){
            var returnAge;
            var strBirthdayArr=strBirthday.split("-");
            var birthYear = strBirthdayArr[0];
            var birthMonth = strBirthdayArr[1];
            var birthDay = strBirthdayArr[2];
            var d = new Date();
            var nowYear = d.getFullYear();
            var nowMonth = d.getMonth() + 1;
            var nowDay = d.getDate();
            if(nowYear == birthYear){
                returnAge = 0;//同年 则为0岁
            }else{
                var ageDiff = nowYear - birthYear ; //年之差
                if(ageDiff > 0){
                    if(nowMonth == birthMonth){
                        var dayDiff = nowDay - birthDay;//日之差
                        if(dayDiff < 0){
                            returnAge = ageDiff - 1;
                        }else{
                            returnAge = ageDiff ;
                        }
                    }else{
                        var monthDiff = nowMonth - birthMonth;//月之差
                        if(monthDiff < 0){
                            returnAge = ageDiff - 1;
                        }else{
                            returnAge = ageDiff ;
                        }
                    }
                }else{
                    returnAge = "";//返回-1 表示出生日期输入错误 晚于今天
                }
            }
            return returnAge;//返回周岁年龄
        }
    },
    components: {
        warn
    },
    filters:{
       getFrom(id){
            let ret ="";
            if(id == "1"){
                ret="罕见病检测平台";
            }else if(id == '2'){
                ret="遗传性肿瘤检测平台";
            }else if(id == "3"){
                ret = "家树系统"
            }
            return ret;
        }
    },
    created() {
        this.getFamilyList();
    },
}
</script>
  